<template>
    <view class="home-container">
        <view class="nationalName">
            <view class="">智慧政务
                <span>“</span>
                心诚办
                <span>”</span>
            </view>
            <view>政务服务无小事 一枝一叶总关情</view>
        </view>
        <u-swiper :list="[require('@/static/scenery.png')]" indicator indicatorMode="line" circular :autoplay='true' imgMode=''></u-swiper>
        <!-- <view class="topImage">
            <view class="topBox">
                <view>XXX服务 </view>
                <view>
                    <span>专业团队</span>
                    <span>极速出签</span>
                    <span>智能申请</span>
                </view>
            </view>
        </view> -->
        <view class="cardBox">
            <view class="kongKim">
                <view class="itemBox" @click="toPage('/pages/tabbar/highFrequency','1')">
                    <!-- <navigator url="/#anchor1" open-type="redirect"> -->
                    <image src="../../static/kongKim1.png"></image>
                    <view class="text">高频事项</view>
                    <!-- </navigator> -->

                </view>
                <view class="itemBox" @click="toPageSwitchTab('/pages/tabbar/handbook')">
                    <image src="../../static/kongKim2.png"></image>
                    <view class="text">办事指南</view>
                </view>
                <view class="itemBox" @click="toPage('/personalCenter/telephone')">
                    <image src="../../static/kongKim3.png"></image>
                    <view class="text">部门电话</view>
                </view>
                <view class="itemBox" @click="toPage('/personalCenter/addForm','verifyToken')">
                    <image src="../../static/kongKim4.png"></image>
                    <view class="text">办不成事</view>
                </view>
            </view>
            <view class="u-demo-block__content" style="padding-top:20rpx">
                <u-notice-bar :text="noticeList" direction="column" @click="click"></u-notice-bar>
            </view>
            <view class="wicketBox" @click="goOpenLocation()">
                <view>政务服务中心导航</view>
                <view>找不到政务服务中心？点我！点我</view>
            </view>
            <view class="highFrequency" id="anchor1">
                <view>
                    高频事项
                </view>
                <!-- <view>
                    换一换
                    <image src="../../static/refresh.png"></image>
                </view> -->
            </view>
            <u-tabs :list="listAll" :scrollable="true" @click="changeNational" keyName='label'
                :activeStyle="{color: '#3C9CFF',fontWeight: 'bold',fontSize: '26rpx',}"
                :inactiveStyle="{color: '#000',fontWeight: 'bold',fontSize: '26rpx',}"></u-tabs>

            <view class="typeBox">
                <view v-if="guideAllList.length">
                    <view class="typeItem" v-for="(item,index) in guideAllList" :key="index"
                        @click="gotoPage('/personalCenter/handbookDetail?id='+item.id)">
                        <view class="textBox">
                            {{item.title}}
                        </view>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view v-else style="padding-bottom:80rpx">
                    <cc-empty />
                </view>
            </view>

            <!-- <view class="cardItem card1" v-for="(item,index) in listAll" :key="index" @click="clickNational(item)">
                <view class="imgBox">
                    <image :src="item.banner?item.banner.split(',')[0]:'../../static/scenery.png'"></image>
                </view>
                <view class="textBox">
                    <view class="titleText">{{item.countryChineseName}}</view>
                    <view class="money">￥{{setMoney(item)}}</view>
                </view>
            </view> -->
            <cc-bottom />
        </view>
        <!-- <view @click="gotoPage('/pages/login/login')">登录</view> -->
        <!-- <u-popup :show="showTypeBox" mode="bottom" @close="showTypeBox=false" @open="open">
        </u-popup> -->
        <image class="scan" src="../../static/scan.png" @click="scanCode"></image>

        <movable-area class="movableArea" v-if="x">
            <movable-view class="movableView" :position="position" :x="x" :y="y" :direction="'all'" :damping="'10'" @change="onChange" @tap="gotoPage('/personalCenter/deepSeekR1')"
                @touchend="onTouchend">
                <image src="../../static/robot.png" mode="widthFix" class="iconImage"></image>
                <view>AI智能助手</view>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
import ccBottom from '../../components/cc-bottom/cc-bottom.vue'
export default {
    data() {
        return {
            listAll: [
                {
                    label: '个人办事',
                    value: '0'
                },
                {
                    label: '企业办事',
                    value: '1'
                },
                // {
                //     label: '政策享受',
                //     value: '2'
                // },
            ],
            showTypeBox: false,
            nationalItem: {},

            list1: [
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
            ],
            serviceLevel: 0,
            guideAllList: [],
            noticeList: [],
            x: 0,
            y: 0,
            x1: 0,
            x2: 0,
            y1: 0,
            y2: 0,
            move: {
                x: 0,
                y: 0
            },
            position: 4
        }
    },
    onShow() {
        uni.setStorageSync('highFrequency', '')
        uni.getSystemInfo({
            success: (res) => {
                this.x1 = parseInt(res.windowWidth) - 60;
                this.x2 = parseInt(res.windowWidth) - 60;
                this.y1 = parseInt(res.windowHeight) - 20;
                this.y2 = parseInt(res.windowHeight) - 20;
                // setTimeout(() => {
                if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
                if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
                if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
                if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
                this.move.x = this.x;
                this.move.y = this.y;
                // }, 1000)
            }
        })
    },
    onLoad(options) {
        this.getList()
        this.noticeListAllM()

    },
    onShareAppMessage() {
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        // return {
        //     title: "分享标题",
        //     imageUrl: "",//分享封面
        //     //如果有参数的情况可以写path
        //     path: "/myPackageF/pages/brand/brandSecondvideoSrc=" + this.videoSrc + "&series=" + this.series//此处链接为要分享的页面链接
        // };
    },
    methods: {
        onChange(e) {
            if (e.detail.source === "touch") {
                this.move.x = e.detail.x;
                this.move.y = e.detail.y;
            }
        },
        onTap(e) {
            console.log("Tap event");
            // 在这里处理单击事件的逻辑
            // 例如打开链接、执行动作等
        },
        onTouchend() {
            this.x = this.move.x;
            this.y = this.move.y;
            const query = uni.createSelectorQuery().in(this);
            query.select('.movableArea').boundingClientRect(rect => {
                setTimeout(() => {
                    this.x = rect.width - 60;
                    console.log("yuan" + this.x, this.y)
                }, 100)
            }).exec();

        },
        goOpenLocation() {
            // 
            uni.openLocation({
                latitude: Number(40.846992),
                longitude: Number(111.762779),
                name: '内蒙古自治区呼和浩特市新城区成吉思汗大街街道政务服务中心'
            })
        },
        // 一证一码扫码
        scanCode() {
            let that = this
            uni.scanCode({
                success(res) {
                    // console.log(res.result.split('=')[res.result.split('=').length-1]);
                    console.log(decodeURIComponent(res.result))
                    that.gotoPage('/personalCenter/getBaseInfo?code=' + res.result.split('=')[res.result.split('=').length - 1])
                    // @click="gotoPage('/personalCenter/showPdf?pdfPath='+item)"
                }
            })
        },

        getList() {
            this.$asynApi.guideAllListApi(
                {
                    serviceLevel: this.serviceLevel,
                    highFrequency: 1
                }
            ).then(res => {
                console.log(res);
                this.guideAllList = res.data
            })
        },

        noticeListAllM() {
            this.$asynApi.noticeListAll().then(res => {
                // this.noticeList = res.data
                res.data.map(item => {
                    this.noticeList.push(item.noticeTitle)
                })
            })
        },

        setMoney(item) {
            let number1 = item.standardMoney
            let number2 = item.fastMoney
            let number3 = item.groupMoney
            if (number1 <= number2 && number1 <= number3) {
                return number1;
            }
            if (number1 >= number2 && number2 <= number3) {
                return number2;
            }
            if (number3 <= number2 && number3 <= number1) {
                return number3;
            }
        },
        getData() {
            uni.showLoading({
                mask: true,
            })
        },

        // 跳转页面
        toPage(url, verifyToken) {
            if (verifyToken == 'verifyToken') {
                if (uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: url,
                    })
                }
                else {
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    });
                    setTimeout(val => {
                        uni.clearStorage()
                        uni.navigateTo({
                            url: '/pages/login/login',
                        })
                    }, 2000)
                }
            }
            else {
                uni.navigateTo({
                    url: url,
                })
            }
        },

        toPageSwitchTab(url, value) {
            if ('/pages/tabbar/handbook' == url && value == 1) {
                uni.setStorageSync('highFrequency', '1')
            }
            uni.switchTab({
                url: url // 跳转到对应路径的 tabBar 页面
            });
        },
        gotoPage(url) {
            uni.navigateTo({
                url: url,
            })
        },
        gotoPageURl() {
            uni.navigateTo({
                url: "/pages/login/shop"
            })
        },
        // 点击国家
        changeNational(item) {
            console.log(item);
            this.serviceLevel = item.value
            this.getList()
        }
    },
}
</script>

<style lang="scss" scoped>
.status-bar {
    // height: var(--status-bar-height);
    width: 100%;
}

.home-container {
    background-color: #fff;
    .content {
        position: relative;
        height: 100vh;
    }

    .movableArea {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 999;
    }

    .movableView {
        pointer-events: auto;
        width: 80rpx;
        height: 80rpx;
        padding: 10rpx;
        border-radius: 100%;
        font-size: 20rpx;
        text-align: center;
        white-space: nowrap;
        view{
            display: flex;
            justify-content: center;
        }
        // border: 2px solid #33a3dc;
        // background-color: #daee78;
    }

    .iconImage {
        display: block;
        width: 80rpx;
        height: 80rpx;
    }

    .contact {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 100%;
        opacity: 0;
    }
    .nationalName {
        position: absolute;
        z-index: 10;
        color: #fff;
        top: 25vw;
        left: 0rpx;
        width: 100%;
        text-align: center;
        span {
            font-family: cursive;
        }
        view:nth-child(1) {
            font-weight: 500;
            font-size: 58rpx;
        }
        view:nth-child(2) {
            font-weight: 500;
            font-size: 28rpx;
            margin-top: 20rpx;
        }
    }
    .topImage {
        background: url("../../static/top.png") no-repeat top;
        background-size: 100% 100%;
        width: 100vw;
        height: 350rpx;
        color: #fff;
        .topBox {
            padding: 50rpx;
            view:nth-child(1) {
                font-size: 60rpx;
                letter-spacing: 2rpx;
                font-weight: 600;
                line-height: 2;
            }
            span {
                margin-right: 10rpx;
            }
        }
        // padding: ;
    }
    .cardBox {
        width: calc(100% - 80rpx);
        margin: 0 auto;
        padding: 0rpx 20rpx 20rpx 20rpx;
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        color: #555;
        font-size: 32rpx;
        letter-spacing: 2rpx;
        position: relative;
        top: -40rpx;
        border-radius: 40rpx 40rpx 0 0;
        // background-color: #fff;
        overflow: hidden;
        // width: calc(100% - 40rpx);

        .kongKim {
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            box-shadow: 0rpx 0rpx 20rpx 5rpx rgb(212, 212, 212);
            border-radius: 30rpx;
            padding: 20rpx 20rpx;
            .itemBox {
                text-align: center;
                color: #000;
                font-size: 24rpx;
                image {
                    width: 70rpx;
                    height: 70rpx;
                    margin-bottom: 10rpx;
                }
            }
        }
        /deep/ .u-notice-bar {
            border-radius: 20rpx;
        }
        .wicketBox {
            background-image: url("../../static/wicket.png");
            background-size: 100% 100%;
            padding: 40rpx 50rpx;
            border-radius: 30rpx;
            margin-top: 30rpx;
            view:nth-child(1) {
                font-size: 46rpx;
                font-weight: 600;
                color: #fff;
                text-shadow: 0rpx 5rpx 5rpx #40d9ff;
            }
            view:nth-child(2) {
                background-color: #ffd75c;
                font-size: 22rpx;
                padding: 5rpx 10rpx;
                font-weight: 600;
                color: #095be8;
                width: fit-content;
                border-radius: 5rpx;
                margin-top: 10rpx;
                // text-shadow: 0rpx 5rpx 5rpx #40D9FF;
            }
        }
        .highFrequency {
            display: flex;
            justify-content: space-between;
            margin-top: 40rpx;
            view:nth-child(1) {
                font-size: 30rpx;
                color: #000;
                font-weight: 600;
            }
            view:nth-child(2) {
                font-size: 24rpx;
                color: #2a5eec;
                display: flex;
                align-items: center;
                image {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .cardItem {
            border-radius: 15rpx;
            float: left;
            line-height: 1;
            background-size: 100% 100%;
            width: calc(50% - 45rpx);
            margin: 20rpx 20rpx;
            box-shadow: 0rpx 4rpx 15rpx 3rpx rgba(208, 207, 207, 0.281);
            border: #fff 2rpx solid;
            // margin-bottom: 80rpx;
            overflow: hidden;
            .imgBox {
                width: 100%;
                height: 150rpx;
                // display: flex;
                // justify-content: center;
                // align-items: center;
                // background-color: #447efaa8;
                // border-radius: 50%;
                image {
                    border-radius: 15rpx 15rpx 0 0;
                    width: 100%;
                    height: 100%;
                }
            }
            .textBox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15rpx 20rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #000;
                .titleText {
                    overflow: hidden;
                    /* 文本超出时，显示省略标记 */
                    text-overflow: ellipsis;
                    /* 弹性伸缩盒子模型 */
                    display: -webkit-box;
                    /* 子元素呈现3行 */
                    -webkit-line-clamp: 1;
                    /* 子元素排列方式为垂直 */
                    -webkit-box-orient: vertical;
                }
                .money {
                    color: #ff3700;
                }
            }
        }
    }
    .typeBox {
        padding: 30rpx 30rpx 1rpx 30rpx;
        // text-align: center;
        background-color: #e9efff;
        border-radius: 10rpx;
        margin-top: 20rpx;
        .typeItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10rpx 10rpx 10rpx 10rpx;
            margin-bottom: 25rpx;
            background-color: #fff;
            border-radius: 10rpx;

            image {
                width: 72rpx;
                height: 70rpx;
            }
            .textBox {
                width: calc(100% - 76rpx);
                padding-left: 20rpx;
                font-size: 26rpx;
                white-space: nowrap; /* 确保文本在一行内显示 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
            }
        }
    }
    .scan {
        position: fixed;
        bottom: 20rpx;
        right: 20rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #fff;
        border-radius: 50%;
    }
}
/deep/ .u-swiper__wrapper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
}

/deep/ .u-swiper {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    position: relative;
    background-color: transparent !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image {
    height: calc(100vw * 1080 / 1920) !important;
    border-radius: 0rpx !important;
    width: 100vw !important;
    image {
        width: 100vw !important;
        border-radius: 0rpx !important;
        height: calc(100vw * 1080 / 1920) !important;
    }
}
</style>